import React, {Component} from "react";
import {
    apiShopOrderDetail,
    apiExpressageList,
    apiDeliverymanPage,
    apiPrintOutLibraryOrder,
    apieditColorLevelRemark
} from "@/request/orderManagement";
import {
    InfoCircleFilled
} from '@ant-design/icons';
import GoBack from "@/components/TheGoBack";
import RefoundModal from "./components/refund";
import {
    Tooltip,
    Steps,
    Table,
    Button,
    Space,
    Row,
    Col,
    Descriptions,
    Typography,
    Anchor,
    Tag,
    Form,
    Input,
    Modal
} from "antd";
import "./style/style.less";
import TheImage from "@/components/TheImage";
import {CloseCircleFilled} from "@ant-design/icons";
import {toPrint, printWaybill, printOutLibraryOrder, toPrintTool} from "@/utils/toPrint";
import _ from "lodash";
import CuiFu from "./components/cuifu";
import Logistics from "./components/logistics";
import SendGoods from "./components/sendGoods";
import userAvatar from '@/assets/images/zhanwei_head.svg'

const {Step} = Steps;
const {Title} = Typography;
const {Link} = Anchor;
const {TextArea} = Input;

class Details extends Component {
    billSale = React.createRef();
    refundRef = React.createRef();
    cuiFuRef = React.createRef();
    logisticsRef = React.createRef();
    sendGoodsRef = React.createRef();
    state = {
        loading: false,
        options: [],
        dataSource: {
            orderState: "3",
        },
        selectedRowDatas: [], //选中得强制退款数据集
        columns: [
            {
                title: "商品信息",
                render: (text, record, index) => {
                    return (
                        <div
                            style={{
                                display: "flex",
                                alignItems: "center",
                                cursor: "pointer",
                            }}
                        >
                            <TheImage src={record.goodsImage} width={100}/>
                            <span
                                style={{margin: "0 10px"}}
                                onClick={() => {
                                    this.props.history.push(
                                        `/mall/list/detail/${record.productSkuJson[index].goodsId}`
                                    );
                                }}
                            >
                {record.goodsName}
              </span>
                            <span>{record.sku}</span>
                            {record.giftId !== "0" && <div className="gift">赠</div>}
                        </div>
                    );
                },
            },
            {
                title: "商品物料名称(仓库用 APP不显示)",
                dataIndex: "materialName",
                key: "materialName",
                render: (text) => text || "",
            },
            {
                title: "物料ID",
                dataIndex: "materialId",
                key: "materialId",
                render: (text) => text || "",
            },
            {
                title: "商品单价",
                dataIndex: "orderPrice",
                key: "orderPrice",
                render: (text, render) => {
                    return <>
                        <React.$price price={text || 0}/>
                        {

                            render.activityType === 'SECKILL_HOMEPAGE' && <div style={{color: 'red'}}>秒杀价</div>
                        }
                        {
                            render.activityType === 'TEAM_BUY' && <Tag color="red">拼团价</Tag>
                        }
                    </>
                },
            },

            {
                title: "商品数量",
                dataIndex: "orderProductCount",
                key: "orderProductCount",
                render: (text) => text || 0,
            }, {
                title: "备注",
                dataIndex: "skuDescription",
                key: "skuDescription",
                render: (text) => text || '',
            },
            {
                title: "总计",
                dataIndex: "orderPriceTotal",
                key: "orderPriceTotal",
                render: (text) => <React.$price price={text || 0}/>,
            },
            {
                title: "实付金额",
                dataIndex: "detailPayPrice",
                key: "detailPayPrice",
                render: (text) => <React.$price price={text || 0}/>,
            }
        ],
        stepData: [
            {
                title: "生成订单",
                subTitle: "",
            },
            {
                title: "已付款",
                subTitle: "",
            },
            {
                title: "已发货",
                subTitle: "",
            },
            {
                title: "已收货",
                subTitle: "",
            },
            {
                title: "已完成",
                subTitle: "",
            },
        ],
        selectedRowKeys: [],
        bgColor: "#BBBBBB",
        remarkVisible: false,
        colorLevelRemark: ""
    };

    async componentDidMount() {
        await this.getExpressage();
        await this.getCourierOptions();
        await this.getDetails();
    }

    cuiFu = () => {
        this.cuiFuRef.current.open();
    };
    // 配送员列表
    getCourierOptions = async () => {
        let res = await apiDeliverymanPage({pageNo: 1, pageSize: "-1"})
        if (res.code === 0 && res.data) {
            let courierOptions = []
            res.data.map(v => {
                if (v.hasBoundCar) {
                    courierOptions.push({
                        value: v.deliverymanId,
                        label: v.name
                    })
                }
            })
            this.setState({courierOptions})
        }
    }
    getDetails = async () => {
        const orderId = this.props.match.params.id;
        // console.log(this.props.match.params);
        const response = await apiShopOrderDetail({orderId});
        if (response.code === 0) {
            const dataSource = response.data;
            const stepData = [
                {
                    title: "生成订单",
                    subTitle: dataSource.createTime || "",
                    // description: (
                    //   <Space>
                    //     <Button type='primary' size="middle" onClick={this.cuiFu} >
                    //       催付
                    //     </Button>
                    //   </Space>
                    // )
                },
                {
                    title: dataSource.activityType === "TEAM_BUY" && dataSource.orderState === 6 ? "待分享" : '已付款',
                    subTitle: dataSource.payTime || "",
                    description: (
                        <Space>
                            {((dataSource.activityType === "TEAM_BUY" && dataSource.orderState === 6) || dataSource.isOutsourceShipments) ? null :
                                <Button type="primary" size="middle" onClick={this.sendGoods}>
                                    发货
                                </Button>
                            }
                            {this.props.match.params.fromPage !== "keeper" ? (
                                <Button
                                    type="primary"
                                    onClick={this.coerceRefund}
                                    danger
                                    loading={this.loading}
                                >
                                    退款
                                </Button>
                            ) : null}
                        </Space>
                    ),
                },
                {
                    title: "已发货",
                    subTitle: dataSource.goodsGoTime || "",
                    description: (
                        <Space>
                            {
                                dataSource.deliverCount === 0 ?
                                    <Button type="primary" onClick={this.onLogistics}>查看物流</Button> :
                                    <Button type="primary" size="middle" onClick={this.sendGoods}>发货</Button>
                            }
                        </Space>
                    ),
                },
                {
                    title: "已收货",
                    subTitle: dataSource.goodsArrTime || "",
                },
                {
                    title: "已完成",
                    subTitle: dataSource.finishTime || "",
                    description: (
                        <Space>
                            <Button type="primary" onClick={() => this.onLogistics('9')}>
                                查看物流
                            </Button>
                        </Space>
                    ),
                },
            ];
            dataSource.outLibraryCode = dataSource.outLibraryCode?.split(',').map(item => {
                return <p style={{marginBottom: 0}}>{item}</p>
            })
            dataSource.deliveryOrcourierInfo = dataSource.deliveryOrcourierInfo?.split(',').map(item => {
                return <p style={{marginBottom: 0}}>{item}</p>
            })
            console.log(dataSource)
            const detailsData = [
                {
                    title: "订单编号",
                    value: dataSource.orderCode,
                },
                {
                    title: "买家ID",
                    value: dataSource.memberId,
                },
                {
                    title: "订单金额",
                    value: <React.$price price={dataSource.orderTotalPrice || 0}/>,
                },
                {
                    title: "运费",
                    value: !_.isEmpty(dataSource.freight) ? (
                        "包邮"
                    ) : (
                        <React.$price price={dataSource.freight}/>
                    ),
                },
                {
                    title: "下单时间",
                    value: dataSource.createTime,
                },
                {
                    title: "买家昵称",
                    value: dataSource.memberNickName,
                },
                {
                    title: "实付金额",
                    value: <React.$price price={dataSource.orderPayPrice || 0}/>,
                },
                {
                    title: "订单状态",
                    value: this.getOrderState(dataSource.orderState),
                },
                {
                    title: "出库单号",
                    value: dataSource.outLibraryCode,
                },
                {
                    title: "物流单号",
                    value: dataSource.deliveryOrcourierInfo,
                },
                {
                    title: '配送员',
                    value: dataSource.deliverymanName,
                },
                {
                    title: '优惠金额',
                    value: <React.$price price={dataSource.platformDiscountPrice || 0}/>,
                    flag: true,
                    // context: '优惠券抵扣:' + (!!dataSource.couponTotal ? (dataSource.couponTotal / 100).toFixed(2) : "0") + ',满减优惠:' + (!!dataSource.fullDecrementAmount ? (dataSource.fullDecrementAmount / 100).toFixed(2) : "0")
                    context: dataSource.discountStr || ''

                },
                {
                    title: '哈哈豆抵扣',
                    value: <React.$price price={dataSource.integralDiscountPrice || 0}/>,
                },
            ];
            const productSkuJson = dataSource.orderDetailList;
            const productData = productSkuJson.map((v) => {
                let arr = JSON.parse(v.goodsSkuJson);
                return {
                    materialId: v.materialId,
                    materialName: v.materialName,
                    goodsName: v.goodsName,
                    orderPrice: v.orderPrice,
                    orderProductCount: v.orderProductCount,
                    // orderPriceTotal: v.orderPriceTotal,
                    sku:
                        arr.hasOwnProperty("skuAttribute") &&
                        arr.skuAttribute.map((j) => {
                            return j.value;
                        }),
                    giftId: v.giftId,
                    activityType: v.activityType,
                    orderPriceTotal: v.orderPriceTotal, // 原价
                    detailDiscountsPrice: v.detailDiscountsPrice, // 优惠金额
                    detailPayPrice: v.detailPayPrice, //实付价
                    goodsImage: v.goodsImage,
                    productSkuJson,
                    skuId: arr.hasOwnProperty("skuAttribute") && arr.SKUId,
                    key: v.shopOrderDetailId,
                    salesStatus: v.salesStatus,
                    skuDescription: v.skuDescription
                };
            });
            // console.log(productData, "productData");
            const receiving = [
                {
                    title: "收货人",
                    value: dataSource.memberName,
                },
                {
                    title: "联系电话",
                    value: dataSource.memberPhone,
                },
                {
                    title: "收货地址",
                    value: dataSource.memberAddress,
                },
            ];
            let bgColor = ""
            let progressList = [], deliveryTask = null
            if (dataSource && dataSource.deliveryTask && dataSource.deliveryTask.progressList) {
                progressList = dataSource.deliveryTask.progressList
                for (let key in progressList) {
                    // console.log(progressList[key].taskStatus)
                    switch (progressList[key].taskStatus) {
                        case 1:
                            progressList[key].taskStatus = "待开始";
                            break;
                        case 2:
                            progressList[key].taskStatus = "配送中";
                            break;
                        case 3:
                            progressList[key].taskStatus = "已送达";
                            break;
                        case 4:
                            progressList[key].taskStatus = "配送员取消";
                            break;
                        case 5:
                            progressList[key].taskStatus = "用户取消";
                            break;
                    }
                }
            }
            if (dataSource && dataSource.deliveryTask) {
                deliveryTask = dataSource.deliveryTask
            }
            if (dataSource.colorLevel) {
                bgColor = dataSource.colorLevel
            } else {
                bgColor = this.state.bgColor
            }
            // console.log(deliveryTask)
            this.setState({
                dataSource,
                stepData,
                detailsData,
                productData,
                receiving,
                progressList,
                deliveryTask,
                bgColor,
                colorLevelRemark: dataSource.colorLevelRemark
            });
        }
    };
    sendGoods = () => {
        let {shopOrderId, oneOutLibraryCode, outLibraryCount} = this.state.dataSource;
        if (outLibraryCount === 1) {
            // 单包裹
            this.sendGoodsRef.current.send(shopOrderId, oneOutLibraryCode);
        } else {
            // 多包裹
            this.sendGoodsRef.current.open(shopOrderId, 'send');
        }

    };
    getExpressage = async () => {
        let res = await apiExpressageList();
        if (res.code === 0 && res.data) {
            let options = res.data.map((v) => {
                return {
                    value: v.expressageCompanyCode,
                    label: v.expressageCompanyName,
                };
            });
            this.setState({options});
        }
    };
    onLogistics = (orderState) => {
        let {shopOrderId, outLibraryCount, oneOutLibraryCode} = this.state.dataSource;
        if (outLibraryCount === 1) {
            // 单包裹
            if (this.state.deliveryTask) {
                let chatHistory = document.getElementsByClassName('p-layout-content')[0]
                if (chatHistory.scrollHeight > chatHistory.clientHeight) {
                    setTimeout(function () {
                        //设置滚动条到最底部
                        chatHistory.scrollTop = chatHistory.scrollHeight;
                    }, 0);
                }
            } else {
                this.logisticsRef.current.onLogistics(shopOrderId, oneOutLibraryCode);
            }
        } else {
            // 多包裹
            this.sendGoodsRef.current.open(shopOrderId, 'courier', orderState);
        }
    };
    getOrderState = (value) => {
        let label = null;
        switch (value) {
            case "3":
                label = <span style={{color: "#d9001b"}}>待付款</span>;
                break;
            case "4":
                label = <span style={{color: "#f59a23"}}>待发货</span>;
                break;
            case "5":
                label = <span style={{color: "#70b603"}}>待收货</span>;
                break;
            case '6':
                label = <span style={{color: '#70b603'}}>待分享</span>
                break
            case "9":
                label = <span style={{color: "#70b685"}}>交易成功</span>;
                break;
            case "0":
                label = <span style={{color: "#c280ff"}}>交易关闭</span>;
                break;
        }
        return label;
    };
    getOrderStatus = (value) => {
        let num = 0;
        switch (value) {
            case "3":
                num = 0;
                break;
            case "4":
                num = 1;
                break;
            case "5":
                num = 2;
                break;
            case "9":
                num = 4;
                break;
        }
        return num;
    };
    WaybillPrint = () => {
        let sku = [];
        // let productData = JSON.parse(JSON.stringify(this.state.productData));
        // productData.forEach((pro) => {
        //     pro.productSkuJson.map((item) => {
        //         item.goodsSkuJson = JSON.parse(item.goodsSkuJson);
        //         let skuAttribute = item.goodsSkuJson.skuAttribute;
        //         sku.push(
        //             item.goodsName +
        //             "  " +
        //             skuAttribute.map((item2) => item2.key + ":" + item2.value).join(";")
        //         );
        //     });
        // });
        // console.log(this.state.dataSource);
        printWaybill(this.state.dataSource, sku);
    };
    // 出库单打印-多包裹拦截中间件
    printOutLibraryOrderMiddleware = () => {
        // console.log(this.state.dataSource)
        let {shopOrderId, oneOutLibraryCode, outLibraryCount} = this.state.dataSource;
        if (outLibraryCount === 1) {
            // 单包裹
            this.printOutLibraryOrder(shopOrderId, oneOutLibraryCode)
        } else {
            // 多包裹
            this.sendGoodsRef.current.open(shopOrderId, 'stockOutPrint')
        }
    }
    printOutLibraryOrder = async (id, code) => {
        let params = {
            orderId: id,
            code
        }
        // 多包裹时里当前包裹的code
        const ckCode = this.sendGoodsRef.current.stockOutModalRef.current.getCkCode();
        if (ckCode) {
            params.code = ckCode
        }
        // const res = await apiPrintOutLibraryOrder({ orderId: this.props.match.params.id })
        const res = await apiPrintOutLibraryOrder(params)
        if (res.code === 0) {
            let data = res.data.stockOutLibraryInfoPrintVoList
            let resultData = [], countTotal = 0, payTotal = 0
            data.forEach((item, index) => {
                item.sort = index + 1
                countTotal += item.count
                payTotal += Number(item.totalPrice) ? Number(item.totalPrice) : 0
                item.materialName = item.materialName
                item.totalPrice = (item.totalPrice / 100).toFixed(2)
                item.unitPrice = (item.unitPrice / 100).toFixed(2)
                resultData.push(item)
                if (index === data.length - 1) {
                    resultData.push({
                        materialId: '合计',
                        count: countTotal,
                        totalPrice: payTotal ? (payTotal / 100).toFixed(2) : '0'
                    })
                }
            })
            toPrintTool(
                [
                    {
                        th: [
                            {label: '序号', value: 'sort', width: '4%'},
                            {label: '物料编码', value: 'materialId', width: '15%'},
                            {label: '物料名称', value: 'materialName', width: '30%', align: 'start'},
                            {label: '规格型号', value: 'skuStr', width: '9%'},
                            {label: '数量', value: 'count', width: '4%'},
                            {label: '单价', value: 'unitPrice', width: '7%'},
                            {label: '金额', value: 'totalPrice', width: '7%'},
                            {label: '仓库', value: 'libraryName', width: '7%'},
                            {label: '备注', value: 'skuDescription', width: '17%'},
                        ],
                        title: res.data.libraryName + '出库单',
                        data: resultData,
                        infos: [
                            {label: '仓库名称', value: res.data.libraryName},
                            {label: '出库时间', value: res.data.outLibraryTime},
                            {label: '出库单号', value: res.data.code},
                            {label: '对应单号', value: res.data.dataCode},
                            {label: '快递公司', value: res.data.courierName},
                            {
                                label: res.data.courierNo ? '快递单号' : '配送员',
                                value: res.data.courierNo ?? res.data.deliverymanName
                            },
                            {label: '付款时间', value: res.data.payTime},
                            // { label: '备注', value: res.data.remark },
                        ],
                        remark: res.data.remark ?? '',
                        tfoot: {
                            '配货时间': '',
                            '发货人': '',
                            '复核人': '',
                            '审核人': '',
                        }
                    }
                ]
            )
            return
            printOutLibraryOrder(res.data)
        }
    }
    coerceRefund = () => {
        this.refundRef.current.open();
    };

    levelColor = () => {
        this.setState({
            remarkVisible: true
        })
    }
    remarkColorChange = (e) => {
        this.setState({
            remarkVisible: false,
            bgColor: e
        })
    }
    colorLevelRemarkChange = (e) => {
        this.setState({
            colorLevelRemark: e.target.value
        })
    }

    onSubmit = async (e) => {
        const {bgColor} = this.state
        const orderId = this.props.match.params.id;
        if (e.keyCode === 13 && e.ctrlKey) {
            e.target.value += '\n'
        } else {
            e.preventDefault();
        }
        let colorLevelRemark = e.target.value
        let res = await apieditColorLevelRemark({orderId, colorLevelRemark, colorLevel: bgColor})
        if (res.code === 0) {
            return React.$message({
                type: "info",
                content: "保存成功"
            })
        }
    }

    render() {
        const {
            dataSource,
            stepData,
            detailsData,
            columns,
            productData,
            receiving,
            courierOptions,
            selectedRowKeys,
            loading,
            selectedRowDatas,
            options,
            progressList,
            deliveryTask,
            remarkVisible,
            bgColor,
            colorLevelRemark
        } = this.state;
        const current = this.getOrderStatus(dataSource.orderState);
        // console.log(dataSource.colorLevelRemark);
        return (
            <>
                <div className={"p-layout-box order-details"}>
                    <GoBack history={this.props.history} title={"订单详情"}/>
                    <div className="printBtn">
                        {dataSource.orderState == 4 ? (
                            <div>
                                {/*<Button*/}
                                {/*  style={{ marginRight: 12 }}*/}
                                {/*  type="default"*/}
                                {/*  onClick={this.billSalePrint}*/}
                                {/*>*/}
                                {/*  出货单打印*/}
                                {/*</Button>*/}
                                <Button
                                    style={{marginRight: 12}}
                                    type="default"
                                    // onClick={this.printOutLibraryOrder}
                                    onClick={this.printOutLibraryOrderMiddleware}
                                >
                                    出库单打印
                                </Button>
                                <Button
                                    type="default"
                                    onClick={this.WaybillPrint}
                                >
                                    面单打印
                                </Button>
                            </div>
                        ) : null}

                        {dataSource.orderState == 5 ? (
                            <div>
                                <Button
                                    style={{marginRight: 12}}
                                    type="default"
                                    // onClick={this.printOutLibraryOrder}
                                    onClick={this.printOutLibraryOrderMiddleware}
                                >
                                    出库单打印
                                </Button>
                                <Button
                                    type="default"
                                    onClick={this.WaybillPrint}
                                >
                                    面单打印
                                </Button>
                            </div>

                        ) : null}
                    </div>

                    <div className={"p-layout-content"}>
                        <div className={"order-details-content"}>
                            <div className={"order-details-title"}>
                                订单号：{dataSource.orderCode || ""}
                            </div>
                            {dataSource.orderState !== "0" && (
                                <Steps progressDot current={current}>
                                    {_.map(stepData, (v, i) => {
                                        return (
                                            <Step
                                                title={v.title}
                                                description={
                                                    current === i ? (
                                                        <div className={"order-details-time"}>
                                                            {v.description}
                                                        </div>
                                                    ) : (
                                                        ""
                                                    )
                                                }
                                                subTitle={
                                                    <div className={"order-details-time"}>
                                                        {v.subTitle}
                                                    </div>
                                                }
                                            />
                                        );
                                    })}
                                </Steps>
                            )}
                            {dataSource.orderState === "0" && (
                                <div
                                    style={{
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "center",
                                    }}
                                >
                                    <CloseCircleFilled
                                        style={{color: "#2b6dea", fontSize: 50, marginRight: 20}}
                                    />
                                    <div>
                                        <div style={{fontSize: 14, color: "#2b6dea"}}>
                                            交易关闭
                                        </div>
                                        <div
                                            style={{fontSize: 14, color: "#2b6dea", marginTop: 5}}
                                        >
                                            <span style={{marginRight: 10}}>原因:</span>
                                            <span>{dataSource.closeReason ?? '订单关闭'}</span>
                                        </div>
                                    </div>
                                </div>
                            )}
                        </div>
                        <div className={"order-details-content"}>
                            <div className={"order-details-title"}>订单概况</div>
                            <ul className={"order-details-information"}>
                                {_.map(detailsData, (v, i) => {
                                    let text = ""
                                    if (!!v.flag) {
                                        text = v.context
                                    }
                                    return (
                                        <li className={'order-details-information-item'}>
                                            <span className={'item-title'}>{v.title}</span>
                                            <span className={'item-separated'}>:</span>
                                            <span style={{display: !!v.flag && !!v.value ? "none" : "inline-block",}}
                                                  className={'item-value'}>{v.value}</span>
                                            <span style={{
                                                display: !!v.flag && !!v.value ? "inline-block" : "none",
                                                marginLeft: 10
                                            }}>
                        <Tooltip title={text}>
                          <span className={'item-value'}>{v.value}</span> <InfoCircleFilled/>
                        </Tooltip></span>
                                        </li>
                                    );
                                })}
                            </ul>
                        </div>
                        <div className={"order-details-content"}>
                            <div className={"order-details-title"}>商品信息</div>

                            <Table
                                dataSource={productData}
                                columns={columns}
                                pagination={false}
                                bordered
                                scroll={{
                                    x: '100%',
                                }}
                                summary={(pageData) => {
                                    let totalOrderPriceTotal = 0;
                                    let totalOrderProductCount = 0;
                                    pageData.forEach(({orderPriceTotal, orderProductCount}) => {
                                        totalOrderPriceTotal += orderPriceTotal || 0;
                                        totalOrderProductCount += orderProductCount || 0;
                                    });
                                    return (
                                        <>
                                            <Table.Summary.Row>
                                                <Table.Summary.Cell colSpan={8}>
                                                    <div style={{textAlign: "center"}}>
                                                        {`共${totalOrderProductCount}件商品，总计`}
                                                        <React.$price price={totalOrderPriceTotal || 0}/>元，
                                                        实付<React.$price price={dataSource.orderPayPrice || 0}/>元
                                                    </div>
                                                </Table.Summary.Cell>
                                            </Table.Summary.Row>
                                        </>
                                    );
                                }}
                            />
                        </div>
                        <div className={"order-details-content"}>
                            <div className={"order-details-title"}>收货信息</div>
                            <ul className={"order-details-receiving"}>
                                {_.map(receiving, (v, i) => {
                                    return (
                                        <li key={i} className={"order-details-receiving-item"}>
                                            <span className={"item-title"}>{v.title}</span>
                                            <span className={"item-separated"}>:</span>
                                            <span>{v.value}</span>
                                        </li>
                                    );
                                })}
                            </ul>
                        </div>
                        {deliveryTask ?
                            <div className={"order-details-content"}>
                                <div className={"order-details-title"}>配送信息</div>
                                <Row style={{padding: "0 20px"}}>
                                    <Col span={6}>
                                        <Title level={5}>任务进度</Title>
                                        <Steps progressDot current={progressList ? progressList.length : 1}
                                               direction="vertical">
                                            {
                                                _.map(progressList, (item, i) => {
                                                    return <Step title={item.taskStatus} description={[item.createTime,
                                                        <br/>, item.progressDescription]}/>
                                                })
                                            }
                                        </Steps>
                                    </Col>
                                    <Col span={10}>
                                        <Descriptions title="客户信息" column={1} bordered>
                                            <Descriptions.Item label="客户头像">
                                                {
                                                    <TheImage
                                                        src={deliveryTask && deliveryTask.memberAvatar ? deliveryTask.memberAvatar : userAvatar}
                                                        width={100}/>
                                                }
                                            </Descriptions.Item>
                                            <Descriptions.Item
                                                label="客户ID">{deliveryTask ? deliveryTask.memberId : ""}</Descriptions.Item>
                                            <Descriptions.Item
                                                label="客户昵称">{deliveryTask ? deliveryTask.memberName : ''}</Descriptions.Item>
                                            <Descriptions.Item
                                                label="手机号">{deliveryTask ? deliveryTask.memberPhone : ''}</Descriptions.Item>
                                            <Descriptions.Item
                                                label="收货地址">{deliveryTask ? deliveryTask.endAddress : ''}</Descriptions.Item>
                                        </Descriptions>
                                    </Col>
                                    <Col span={6} offset={2}>
                                        <Descriptions title="配送员信息" column={1} bordered>
                                            {/*<Descriptions.Item label="配送员头像">Zhou Maomao</Descriptions.Item>*/}
                                            <Descriptions.Item
                                                label="配送员UID">{deliveryTask ? deliveryTask.deliverymanId : ''}</Descriptions.Item>
                                            <Descriptions.Item
                                                label="配送员名称">{deliveryTask ? deliveryTask.deliverymanName : ''}</Descriptions.Item>
                                            <Descriptions.Item
                                                label="联系方式">{deliveryTask ? deliveryTask.deliverymanPhone : ''}</Descriptions.Item>
                                        </Descriptions>
                                    </Col>
                                </Row>
                            </div> : ""}
                        <div>
                            <Row gutter={24}>
                                <Col span={1}>
                                    <div style={{
                                        width: "30px",
                                        height: "30px",
                                        borderRadius: "20px",
                                        backgroundColor: bgColor
                                    }} onClick={this.levelColor}></div>
                                </Col>
                                <Col span={23}>
                                    <div style={{display: "flex"}}>
                                        <div style={{width: "100px"}}>添加备注:</div>
                                        <TextArea value={colorLevelRemark} maxLength={200}
                                                  onChange={(e) => this.colorLevelRemarkChange(e)}
                                                  onPressEnter={(e) => this.onSubmit(e)}/>
                                    </div>
                                </Col>
                            </Row>
                        </div>
                    </div>
                </div>
                <RefoundModal
                    ref={this.refundRef}
                    shopOrderId={this.props.match.params.id}
                    refresh={() => this.getDetails()}
                    dataSource={productData}
                ></RefoundModal>
                <CuiFu ref={this.cuiFuRef}></CuiFu>
                <Logistics options={options} ref={this.logisticsRef}></Logistics>
                <SendGoods
                    options={options}
                    courierOptions={courierOptions}
                    ref={this.sendGoodsRef}
                    history={this.props.history}
                    refresh={() => this.getDetails()}
                    stockOutPrint={this.printOutLibraryOrder}
                ></SendGoods>
                <Modal
                    footer={null}
                    visible={remarkVisible}
                    onCancel={() => this.setState({remarkVisible: false})}
                    bodyStyle={{paddingLeft: 0, paddingRight: 0, paddingBottom: 0}}
                >
                    <div style={{padding: "10px", fontSize: "18px"}}>
                        <p style={{textAlign: "center"}}>选择备注颜色</p>
                        <Row gutter={24}>
                            <Col span={6}>
                                <div className="colorBox" onClick={() => this.remarkColorChange("#F8402E")}>
                                    <div className="remarkColor" style={{backgroundColor: "#F8402E"}}></div>
                                    红色
                                </div>
                            </Col>
                            <Col span={6}>
                                <div className="colorBox" onClick={() => this.remarkColorChange("#FCCA00")}>
                                    <div className="remarkColor" style={{backgroundColor: "#FCCA00"}}></div>
                                    黄色
                                </div>
                            </Col>
                            <Col span={6}>
                                <div className="colorBox" onClick={() => this.remarkColorChange("#A2EF4D")}>
                                    <div className="remarkColor" style={{backgroundColor: "#A2EF4D"}}></div>
                                    绿色
                                </div>
                            </Col>
                            <Col span={6}>
                                <div className="colorBox" onClick={() => this.remarkColorChange("#BBBBBB")}>
                                    <div className="remarkColor" style={{backgroundColor: "#BBBBBB"}}></div>
                                    灰色
                                </div>
                            </Col>
                        </Row>
                    </div>
                    <div style={{borderTop: "1px solid #bbbbbb"}}>
                        <Button block type="text" size="large" style={{color: "#40a9ff", fontSize: "20px"}}
                                onClick={() => this.setState({remarkVisible: false})}>取消</Button>
                    </div>
                </Modal>
            </>
        );
    }
}

export default Details;
